import {Component, Input, OnInit} from "@angular/core";
import {NzDrawerRef, NzMessageService} from "ng-zorro-antd";
import {HttpClient} from "@angular/common/http";
import {I18NService} from "@core/i18n/i18n.service";
import { saveAs } from 'file-saver';
import {FormGroup, Validators} from "@angular/forms";
import {BaseComponent} from "@shared/base/base.component";
import {QuestionService} from "../../question/service/question.service";
import {Question} from "../../question/model/question";
@Component({
  selector: 'nz-drawer-custom-component',
  template: `
 
      <!--<style>-->
        <!--#main{-->

        <!--}-->
        <!--h2{-->
          <!--display: block;-->
          <!--margin: 0 auto;-->
          <!--text-align: center;-->
        <!--}-->
        <!--.mytable{-->
          <!--border-collapse: collapse;-->
          <!--border-top: 2px solid #ddd;-->
          <!--border-bottom: 2px solid #ddd;-->
          <!--margin: 20px auto;-->
          <!--width: 80%;-->
        <!--}-->
        <!--.mytable tr{-->
          <!--width: 90%;-->
        <!--}-->
        <!--.mytable td{-->
          <!--padding: 5px 10px;-->
        <!--}-->
        <!--a{text-decoration: none;}-->
     <!---->
      <!--</style>-->
      
    <div >
      <div *ngFor="let list of listOfData">
      <h2>{{list.questionTitle}}</h2>
      <table class="mytable">
        <div *ngFor="let question of list.questionList;let i = index">
          <tr>
          <td>{{i+1}}. </td>
          <td style="text-align:left;">{{question.content}}</td>
          </tr>
          <tr >
          <td colspan="2">
            <table *ngIf="question.questionType=='单选题'||question.questionType=='多选题'">
              <tr *ngIf="question.choiceA!=null"><td>A. </td><td >{{question.choiceA}}</td></tr>
              <tr *ngIf="question.choiceB!=null"><td>B. </td><td>{{question.choiceB}}</td></tr>
              <tr *ngIf="question.choiceC!=null"><td>C. </td><td>{{question.choiceC}}</td></tr>
              <tr *ngIf="question.choiceD!=null"><td>D. </td><td>{{question.choiceD}}</td></tr>
              <tr *ngIf="question.choiceE!=null"><td>E. </td><td >{{question.choiceE}}</td></tr>
              <tr *ngIf="question.choiceF!=null"><td>F. </td><td>{{question.choiceF}}</td></tr>
              <tr *ngIf="question.choiceG!=null"><td>G. </td><td>{{question.choiceG}}</td></tr>
              <tr *ngIf="question.choiceH!=null"><td>H. </td><td>{{question.choiceH}}</td></tr>
            </table>
          </td>
          </tr>
          <tr><td colspan="2" style="height:20px;"></td></tr>
        </div>>
      </table>
      </div>

     
    </div>
 
 
    <div>
          <label  nzRequired  maxlength="50">试卷标题</label>{{errorMessage}}
          <input nz-input  [(ngModel)]="paperName">

          <label   maxlength="200" >试卷描述</label>
          <textarea rows="3" nz-input  [(ngModel)]="describe"></textarea>
      
      <button nzType="primary" (click)="close()" nz-button>提交</button>
    </div>
  `
})
export class NzDrawerCustomComponent implements OnInit{
  @Input() _idStr :string;
  set idStr(val: string) {
    this._idStr = val;
  }
  paperName:'';
  describe:'';
  errorMessage:string;
  validateForm: FormGroup;
  constructor(
    private drawerRef: NzDrawerRef<string>,
    private http: HttpClient,
    private message: NzMessageService,
    private questionService: QuestionService,
    private i18nService: I18NService,
    ) {}

  close(): void {
    if (this.paperName!=''&&this.paperName!=undefined&&this.paperName!=null&&this._idStr!=undefined&&this._idStr!=null) {
      this.exportQuestionByIds(this.describe, this._idStr, this.paperName);
    }else {
      if(this._idStr!=undefined||this._idStr!=null){
        this.errorMessage='未选择试题';
      } else {
        this.errorMessage='试卷名不能为空';
      }
    }
  }
  private getDisposition(data: string) {
    const arr: any = (data || '')
      .split(';')
      .filter(i => i.includes('='))
      .map(v => {
        const strArr = v.split('=');
        const utfId = `UTF-8''`;
        let value = strArr[1];
        if (value.startsWith(utfId)) {
          value = value.substr(utfId.length);
        }
        return { [strArr[0].trim()]: value };
      });
    return arr.reduce((o, item: any) => item, {});
  }
  exportQuestionByIds(describe:string,idStr:string,paperName:string):void {
    this.http.get( '/get/web/download/questionModule/QuestionService/exportQuestionByIds', {responseType:'blob',observe:'response',params:{describe:describe,idStr:idStr,paperName:paperName}})
      .subscribe(res => {
        if (res.status !== 200 || res.body.size <= 0||res.body.type==='application/json') {
          this.message.error(this.i18nService.translate('导出失败,无数据'));
          return;
        }
        const name=res.headers.get('Content-disposition');
        const disposition: any = this.getDisposition(name);
        const fileName =
          disposition[`filename*`] ||
          disposition[`filename`] ||
          res.headers.get('filename') ||
          res.headers.get('x-filename');
        saveAs(res.body, decodeURI(fileName));
        this.message.success(this.i18nService.translate('导出成功'));
      }, err => {
        this.message.error(this.i18nService.translate('导出失败'));
      });
  }
  listOfData:Question[];
  ngOnInit(): void {
    this.getQuestionByIds();
  }

  getQuestionByIds():void{
    this.questionService.getQuestionByIds(this._idStr).subscribe(res=>{
      this.listOfData=res;
    });
  }
}
